<template>
  <el-main>
    <div class="function_box">
      <span>
        <el-button-group>
          <el-button type="primary" icon="el-icon-arrow-left" :disabled="weeks===1" @click="previousWeeks">上一周</el-button>
          <el-button type="primary" :disabled="weeks===total" @click="nextWeeks">下一周<i class="el-icon-arrow-right el-icon--right"></i></el-button>
        </el-button-group>
      </span>
      <span class="title_box">
        <span class="title">&nbsp;{{year}}学年|第<font color="#00bfff">{{weeks}}</font>周课表&nbsp;</span>
      </span>
      <span>
        <el-select style="width: 135px" v-model="year" placeholder="请选择学年">
          <el-option
              v-for="item in yearData"
              :key="item"
              :label="'第'+item+'学年'"
              :value="item">
          </el-option>
        </el-select>
        <el-select style="width: 118px" v-model="weeks" placeholder="请选择周课表">
          <el-option
              v-for="item in total"
              :key="item"
              :label="'第'+item+'周课表'"
              :value="item">
          </el-option>
        </el-select>
      </span>
    </div>

    <el-table
        :data="tableData"
        border
        stripe
        :cell-style="{height: '125px'}"
        :header-cell-style="{background:'rgb(112,146,187)',color: 'white'}"
        style="width: 100%">
      <el-table-column label="周" prop="week" align="center"></el-table-column>

      <el-table-column label="上课时间点" align="center">
        <el-table-column v-for="(v,i) in titleData"
                         :key="i"
                         align="center">
          <!--时间标题-->
          <template slot="header">
            <div>
              第{{v.count}}节 <br/>
              {{v.startTime}}-{{v.endTime}}
            </div>
          </template>
          <!--数据-->
          <template slot-scope="scope">
            <div v-for="(l,i) in lesson" :key="i">
              <div v-if="i+1===v.count">
                {{scope.row[lesson[i]].course}}<br>
                {{scope.row[lesson[i]].class}}<br>
                {{scope.row[lesson[i]].building}}
                &nbsp;
                {{scope.row[lesson[i]].classroom}}
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </el-main>
</template>

<script>

import {queryTeacherTimetable} from "@/api/timetable";

export default {
  name: "MyLesson",
  data() {
    return {
      yearData: [
          '2022-1',
          '2022-2',
          '2023-1',
          '2023-2',
          '2024-1',
          '2024-2',
          '2025-1',
          '2025-2'
      ],
      titleData: [
        {
          id:'1',
          count:1,
          startTime:'08:00',
          endTime:'08:45'
        },
        {
          id:'2',
          count:2,
          startTime:'08:55',
          endTime:'09:40'
        },
        {
          id:'3',
          count:3,
          label:'下午',
          startTime:'09:55',
          endTime:'10:40'
        },
        {
          id:'4',
          count:4,
          startTime:'10:50',
          endTime:'11:35'
        },
        {
          id:'5',
          count:5,
          startTime:'13:50',
          endTime:'14:35'
        },
        {
          id:'6',
          count:6,
          startTime:'14:45',
          endTime:'15:30'
        },
        {
          id:'7',
          count:7,
          startTime:'15:40',
          endTime:'16:20'
        },
        {
          id:'8',
          count:8,
          startTime:'16:20',
          endTime:'17:00'
        },
      ],
      lesson: ['one','two','three','four','five','six','seven','eight'],
      tableData: [],
      weeks: 1,
      year: "2025-2",
      total: 20,
      user: JSON.parse(window.sessionStorage.getItem('user')),
    }
  },
  methods:{
    load(){
      queryTeacherTimetable({teacherId:this.user.id,weeks:this.weeks,year:this.year}).then(res => {
        this.tableData = res.data;
      })
    },
    previousWeeks(){
      this.weeks--;
      this.load();
    },
    nextWeeks(){
      this.weeks++;
      this.load();
    },
  },
  watch:{
    year:{
      handler () {
        this.load();
      }
    },
    weeks:{
      handler () {
        this.load();
      }
    }
  },
  created() {
    this.load();
  }
}
</script>

<style lang="less" scoped>
  .title_box{
    font-family: 华文行楷,serif;
    font-weight: bold;
    border: solid 1px #eee;
    border-radius: 3%;
    padding: 5px;
    //外圈阴影
    box-shadow: 0 0 10px #ddd;
    margin-bottom: 15px;
    text-align: center;
    .title{
      color: gray;
      font-size: 40px;
    }
  }

  .function_box{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

</style>
